part of 'widget.dart';

class _LexicalItemImagePickerView extends StatelessWidget {
  const _LexicalItemImagePickerView({
    required _LexicalItemImagePickerWloc wloc,
  }) : _wloc = wloc;

  final _LexicalItemImagePickerWloc _wloc;

  Widget _buildFileNameLabel({
    required BuildContext context,
  }) {
    return ConverterWlocBuilder<_LexicalItemImagePickerWloc, _LexicalItemImagePickerWlocState, int>(
      wloc: _wloc,
      converter: (state) => state.activeImageIndex,
      builder: (context, activeImageIndex) {
        final label = _wloc.getFileNameLabel(
          filePath: _wloc.widget.imagePaths[activeImageIndex],
        );

        return Stack(
          children: [
            Text(
              label,
              style: _LexicalItemImagePickerTheme.of(context).textTheme.fileNameLabelOutline,
              textAlign: TextAlign.start,
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
            Text(
              label,
              style: _LexicalItemImagePickerTheme.of(context).textTheme.fileNameLabel,
              textAlign: TextAlign.start,
              overflow: TextOverflow.ellipsis,
              maxLines: 1,
            ),
          ],
        );
      },
    );
  }

  Widget _buildDots({
    required BuildContext context,
  }) {
    return ConverterWlocBuilder<_LexicalItemImagePickerWloc, _LexicalItemImagePickerWlocState, int>(
      wloc: _wloc,
      converter: (state) => state.activeImageIndex,
      builder: (context, activeImageIndex) {
        final widgets = <Widget>[];

        for (var i = 0; i < _wloc.widget.imagePaths.length; i++) {
          if (i > 0) {
            widgets.add(const SizedBox(
              width: 4,
            ));
          }

          final dotColor = i == activeImageIndex
              ? _LexicalItemImagePickerTheme.of(context).activeDotColor
              : _LexicalItemImagePickerTheme.of(context).inactiveDotColor;

          final dot = Container(
            width: 8.0,
            height: 8.0,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: dotColor,
              border: Border.all(
                color: _LexicalItemImagePickerTheme.of(context).dotOutlineColor,
                width: 0.4,
              ),
            ),
          );

          widgets.add(dot);
        }

        return Row(
          mainAxisSize: MainAxisSize.min,
          children: widgets,
        );
      },
    );
  }

  Widget _buildLeftArrow({
    required BuildContext context,
  }) {
    return FractionallySizedBox(
      widthFactor: 0.5,
      heightFactor: 1.0,
      alignment: Alignment.topLeft,
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: _wloc.onPreviousImageButtonPressed,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.only(
                left: 5.0,
              ),
              child: DecoratedIcon(
                icon: Icon(
                  CupertinoIcons.back,
                  color: _LexicalItemImagePickerTheme.of(context).iconColor,
                  size: 32,
                ),
                decoration: IconDecoration(
                  border: IconBorder(
                    width: 1.7,
                    color: _LexicalItemImagePickerTheme.of(context).iconOutlineColor,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildRightArrow({
    required BuildContext context,
  }) {
    return FractionallySizedBox(
      widthFactor: 0.5,
      heightFactor: 1.0,
      alignment: Alignment.topRight,
      child: MouseRegion(
        cursor: SystemMouseCursors.click,
        child: GestureDetector(
          onTap: _wloc.onNextImageButtonPressed,
          behavior: HitTestBehavior.translucent,
          child: Align(
            alignment: Alignment.centerRight,
            child: Padding(
              padding: const EdgeInsets.only(
                right: 5.0,
              ),
              child: DecoratedIcon(
                icon: Icon(
                  CupertinoIcons.forward,
                  color: _LexicalItemImagePickerTheme.of(context).iconColor,
                  size: 32,
                ),
                decoration: IconDecoration(
                  border: IconBorder(
                    width: 1.7,
                    color: _LexicalItemImagePickerTheme.of(context).iconOutlineColor,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildImagePickingButton({
    required BuildContext context,
  }) {
    return AppButton(
      onPressed: _wloc.onImagePickingButtonPressed,
      child: SizedBox(
        width: 38,
        height: 38,
        child: Center(
          child: DecoratedIcon(
            icon: Icon(
              CupertinoIcons.checkmark_alt,
              color: _LexicalItemImagePickerTheme.of(context).iconColor,
              size: 31.8,
            ),
            decoration: IconDecoration(
              border: IconBorder(
                width: 1.7,
                color: _LexicalItemImagePickerTheme.of(context).iconOutlineColor,
              ),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: _wloc.widget.width,
      child: AspectRatio(
        aspectRatio: 600 / 432,
        child: Stack(
          children: [
            CarouselSlider.builder(
              itemCount: _wloc.widget.imagePaths.length,
              itemBuilder: (context, index, realIndex) {
                return Image.file(
                  File(_wloc.widget.imagePaths[index]),
                  fit: BoxFit.contain,
                  filterQuality: FilterQuality.medium,
                );
              },
              carouselController: _wloc.controller,
              options: CarouselOptions(
                aspectRatio: 600 / 432,
                viewportFraction: 1.0,
                enableInfiniteScroll: true,
                reverse: false,
                autoPlay: false,
                scrollPhysics: const NeverScrollableScrollPhysics(),
                onPageChanged: (index, reason) {
                  _wloc.onImageChanged(
                    index: index,
                  );
                },
              ),
            ),
            Positioned.fill(
              bottom: 10,
              child: Align(
                alignment: Alignment.bottomCenter,
                child: _buildDots(
                  context: context,
                ),
              ),
            ),
            Positioned.fill(
              bottom: 28,
              left: 16,
              child: Align(
                alignment: Alignment.bottomLeft,
                child: _buildFileNameLabel(
                  context: context,
                ),
              ),
            ),
            Positioned.fill(
              child: _buildLeftArrow(
                context: context,
              ),
            ),
            Positioned.fill(
              child: _buildRightArrow(
                context: context,
              ),
            ),
            Positioned.fill(
              child: Align(
                alignment: Alignment.topRight,
                child: _buildImagePickingButton(
                  context: context,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
